@import '../../../../styles/variables';

.item-box{
  box-sizing: border-box;
  height: 30px;
}
.page-select{
  vertical-align: super;
  margin:0 10px;
}
//page-bar
.page-bar{
    background-color: #fff;
    margin:0 -1px 0 -1px;
    height:30px;
    font-family:PingFangSC-Regular;
  .left{
      color: #6b798e;
      font-size: 12px;
      font-size:12px;
      float:left;
    span{
        line-height: 28px;
        margin:0 8px;
    }
  }
  .right{
    float:right;
    font-weight:400;
    color:rgba(114,126,141,1);
    margin-right: 10px;
  }
  select{
    width: 65px;
    border:1px solid #c3cad9;
    border-radius: 2px;
    text-indent: 10px;
}
}

.page-box{
    max-width: 253px;
    overflow: hidden;
    vertical-align: bottom;
}

.scroll-box{
    position: relative;
}


.pre-btn,.next-btn,.first-btn,.last-btn{
  box-sizing: border-box;
  border:none;
  outline: none;
  color:#fff;
  border-radius:2px;
  display: inline-block;
  line-height: 20px;
  vertical-align: top;
  width:8px;
  height:12px;
  vertical-align: super;
  background-color: #fff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin:8px 5px;
}
.first-btn{
  background-image: url(/assets/image/first-page@2x.png);
}

.pre-btn{
  background-image: url(/assets/image/left-page@2x.png);
}
.next-btn{ 
  background-image: url(/assets/image/right-page@2x.png);
}

.last-btn{
  background-image: url(/assets/image/last-page@2x.png);
}


.page-box{
  display: inline-block;
  .page-box-input{
    box-sizing: border-box;
    padding-left:5px;
    display: inline-block;
    outline: none;
    width:50px;
    height:24px;
    background:rgba(255,255,255,1);
    border-radius:3px;
    margin: 0 10px;
    border:1px solid rgba(212,218,229,1);
  }
}
.page-item{
  font-size:12px;
}
.size-item{
  font-size:12px;
}